<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./static/js/vue.global.js"></script>
</head>
<body>
    <div id="counter" style="width:400px;height:300px;border:1px solid">
        <div style="width: 270px;margin:auto">
            <h2 style="color:red;text-align: center;">个人信息</h2>
            <div style="background-color:#c7a122;padding:20px;border-radius:30px">
                <P>姓名：{{ name }}</P>
                <P>年龄：{{ age }}</P>
                <P>兴趣爱好：{{ hobbies }}</P>
                <P>专业：{{ major }}</P>
            </div>
        </div>
        
    </div>
    
</body>
<script>
    const Counter = {
        data() {
            return{
                name:'xxy',
                age:'20',
                hobbies:'吃饭，睡觉',
                major:'软件技术'
            }
        }
    }
    Vue.createApp(Counter).mount('#counter')
</script>
</html>